// Editor 
// 
// Styling Editor means styling the Editor inside iframe container (dijitEditorIFrameContainer)
// 
// 1. Editor iframe container (default styling): 
//    .dijitEditorIFrameContainer - normal state styles: background-color, border, padding
//
// 2. hovered Editor iframe container (ie, mouse hover on editor)
//    .dijitEditorHover .dijitEditorIFrameContainer/dijitEditorIFrame - styles when mouse hover on the container
// 
// 3. focused Editor iframe container (ie, mouse focus on the editor pane)
//    .dijitEditorFocused .dijitEditorIFrameContainer/dijitEditorIFrame - styles when container focused
// 
// 3. disabled Editor iframe container 
//    .dijitEditorDisabled - editor's inner iframe container disable status styles: background, border
//
.#{$theme-name} {
  .dijitEditor {
    background-color: $editor-bg;
    .dijitToolbar {
      border-color: $editor-border; // make dijitToolbar's border color to be consistent
      border-bottom: 0;
    }
  }
  .dijitEditorIFrameContainer {
    border: 1px solid $editor-border;
  }
  .dijitEditorIFrame {
    padding: $editor-iframe-padding;
  }
  .dijitEditorFocused {
    .dijitEditorIFrameContainer {
      @include dijit-form-control-focus;
    }
  }
  .dijitEditorDisabled {
    &,
    &.dijitEditorFocused {
      .dijitEditorIFrameContainer {
        background-color: $input-bg-disabled;
        border-color: $editor-border;
      }
    }
  }
}

